<template>
	<!--店铺流水-->
	<view :class="['content','bgc-f0',isScrool?'wh100':'']">
<!-- 		<view class="p26 bgc-fff search_sticky">
			<u-search placeholder="请输入客户电话" v-model="value" shape="round" @blur="getRunningData" @search="getRunningData" @custom="getRunningData"></u-search>
		</view> -->
		<view class="search_sticky bgc-f8 z-flex z-flex-between p30">
			<view class="_all z-flex z-flex-align-c" @click="popShow = true">
				<text class="fs26 c-333 mr8">{{recordPrevRole.dealer.name}}</text>
				<u-icon name="arrow-down-fill" color="#666666" size="16"></u-icon>
			</view>
			<view @click="timeShow = true">
				<text class="c-333 fs26">{{timeStr}}</text>
				<u-icon name="arrow-down" color="#333333" size="24"></u-icon>
			</view>
		</view>
		<template v-if="list.length > 0">
			<template v-for="(it,index) in list">
				<view class="_li" :key="index" @click="handViewInfo(it)">
					<u-image src="@/static/images/running.png" width="110" height="110"></u-image>
					<view class="flex-1 fs26 z-flex ml20" style="flex-direction: column;position: relative;">
						<view class="z-flex z-flex-between">
							<view class="flex-1 u-line-1"><text class="fs30">{{it.productName}}</text></view>
							<view style="width: 130rpx;" class="t-r">
								<text>+</text>
								<text class="fs30 fwb ml4 mr4">{{it.divAmount}}</text>
								<text class="fs24">元</text>
							</view>
						</view>
						<view class="z-flex z-flex-align-c z-flex-between mt20">
							<text>{{it.payUser}}</text>
							<text class="fs26 c-e138aa">{{it.divTime}}</text>
						</view>
						<view class="_line mt30"></view>
					</view>
				</view>
			</template>
		</template>
		<view v-show="noMore" class="t-c fs24 c-999 p30">— 暂无更多数据了 —</view>
		<vempty v-show="noData" title="暂无数据"></vempty>
		<footerBottom v-if="sumAmount">
			<view class="z-flex z-flex-end z-flex-align-c p20">
				<text class="c-999">流水合计：￥</text>
				<text class="fs34 fwb">{{sumAmount}}</text>	
				<text class="c-999 ml20">订单数量：</text>
				<text class="fs34 fwb">{{sumCount}}</text>
			</view>
		</footerBottom>
		<u-picker mode="time" v-model="timeShow" :params="params" @confirm="handConfirmTime"></u-picker>
		<u-popup v-model="popShow" mode="bottom" border-radius="30">
			<view class="_zd">
				<view><text class="fs28 c-333 fwb">选择筛选项</text></view>
				<view class="mt40"><text class="fs24 c-666">角色类型</text></view>
				<view class="z-flex z-flex-between mt20 role">
					<template v-for="item in roleList">
						<view :key="item.id" :class="[currentRole.id == item.id?'_role _role_active':'_role']" @click="getCurrentId(item)">{{item.name}}</view>
					</template>
				</view>
				<template v-if="showDealerList.length > 0">
					<view class="mt40"><text class="fs24 c-666">列表项</text></view>
					<view class="_grid mt20 fs22">
						<template v-for="item in showDealerList">
							<view :key="item.id" :class="[dealerRole.id == item.id?'grid _role_active u-line-1':'grid u-line-1']" @click="getCurrentId(item,'list')">{{item.name}}</view>
						</template>
					</view>
				</template>
				<view class="z-flex z-flex-justify-c mt40 mb20">
					<view class="_btn _lt" @click="handCancelPopShow">取消</view>
					<view class="_btn _rt" @click="handSubmitPop">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { capitalRecordApi } from '@/api/user.js'
	import { productListApi } from '@/api/shop.js'
	import moment from 'moment'
	const defaultAll = {name: '全部',id: ''}
	export default{
		config:{
			page: {
			    scroll: 'none'
			}
		},
		data(){
			return {
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				currentIndex: 0,
				dataLe: false,
				list: [],
				value: '',
				sumAmount: null,
				sumCount: 0,
				option: {},
				query:{page: 1,size: 10},
				recordPrevRole: {
					current: {name: '全部',id: 1},
					dealer: defaultAll,
					showDealer: [defaultAll],
				},
				isScrool: false,
				timeShow: false,
				popShow: false,
				timeStr: moment().format('YYYY年MM月'),
				timePar: moment().format('YYYY-MM'),
				roleList: [
					{name: '全部',id: 1},
					{name: '产品',id: 4}
				],
				currentRole: {name: '全部',id: 1},
				showDealerList: [defaultAll],
				dealerRole: defaultAll,
				proList: [],
			}
		},
		onLoad(option) {
			option && (this.option = option)
		},
		onShow() {
			if(this.list.length == 0){
				this.getRunningData()
				this.getProductListApi()
			}
			
		},
		onReachBottom() {
			if(this.dataLe) return
			this.query.page++
			this.getRunningData()
		},
		onPullDownRefresh() {
			let str = {name: '全部',id: 1}
			this.getCurrentId(str)
			this.recordPrevRole = {
					current: str,
					dealer: defaultAll,
					showDealer: [defaultAll],
			}
			this.timeStr = moment().format('YYYY年MM月')
			this.timePar = moment().format('YYYY-MM')
			this.currentIndex = 0
			this.initQuery()
			this.getRunningData()
		},
		computed:{
			noData(){
				return this.query.page == 1 && this.dataLe
			},
			noMore(){
				return this.query.page > 1 && this.dataLe
			},
		},
		watch:{
			popShow(newVal,oldVal){
				this.isScrool = newVal
			}
		},
		methods:{
			handConfirmTime(e){
				this.timeStr = `${e.year}年${e.month}月` 
				this.timePar = `${e.year}-${e.month}` 
				this.initQuery()
				this.getRunningData()
			},
			getCurrentId(e,type){
				if(type){
					this.dealerRole = e
				}else{
					this.currentRole = e
					if(e.id == 4){
						this.showDealerList = this.proList
					}else{
						this.showDealerList = [defaultAll]
					}
					this.dealerRole = this.showDealerList[0]
				}
			},
			async getProductListApi(){
				const {code,data} = await productListApi({businessId:uni.getStorageSync('businessId')})
				if(code != 0) return
				this.proList = data.list
			},
			async getRunningData(){
				this.dataLe = false
				uni.showLoading({
					title: '数据加载中...',
					icon: 'none'
				})
				let params = {}
				if(this.dealerRole.id){
					if(this.currentRole.id == 4){
						params.productId = this.dealerRole.id
					}
				}
				const { id, type } = this.option
				if(id && type){
					params.orderId = id
				}else{
					params.bussinessId = uni.getStorageSync('businessId')
				}
				params.userId = uni.getStorageSync('userId')
				const {code, data} = await capitalRecordApi({
					...params,
					...this.query,
					date: this.timePar
				})
				uni.hideLoading()
				uni.stopPullDownRefresh()
				if(code != 0) return
				this.list.push(...data.list)
				this.dataLe = data.list.length == 0
				this.sumAmount = data.sumAmount
				this.sumCount = data.count
			},
			handCancelPopShow(){
				this.popShow = false
				this.showDealerList = this.recordPrevRole.showDealer
				this.dealerRole = this.recordPrevRole.dealer
				this.currentRole = this.recordPrevRole.current
			},
			handSubmitPop(){
				this.popShow = false
				this.recordPrevRole.current = this.currentRole
				this.recordPrevRole.dealer = this.dealerRole
				this.recordPrevRole.showDealer = this.showDealerList
				this.initQuery()
				this.getRunningData()
			},
			initQuery(){
				this.query.page = 1
				this.list = []
			},
			handViewInfo(param){
				let zz = /[`~!@#$%^&*]/g
				uni.$u.route({
					type: 'navigateTo',
					url: 'mapPages/water_info/index',
					params: {
						payUser: param.payUser.replace(zz,''),
						payUserId: param.payUserId,
						dealerName: param.dealerName.replace(zz,''),
						dealerId: param.dealerId,
						inviteName: param.inviteName.replace(zz,''),
						inviteId: param.inviteId,
						businessUserName: param.businessUserName.replace(zz,''),
						businessUserId: param.businessUserId
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wh100{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.content{
		._all{
			background-color: #ecf0f1;
			border-radius: 40rpx;
			padding: 8rpx 20rpx;
		}
		._zd{
			min-height: 800rpx;
			padding: 40rpx 50rpx;
			.role{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-column-gap: 30rpx;
			}
			._role,.grid{
				// height: 60rpx;
				line-height: 60rpx;
				border-width: 1rpx;
				border-style: solid;
				background-color: #F0F0F0;
				border-radius: 10rpx;
				text-align: center;
				border-color: #F0F0F0;
				color: #666666;
			}
			._role_active{
				border-color: $uni-color-theme;
				color: $uni-color-theme;
				background-color: rgba($color: $uni-color-theme, $alpha: 0.1);
			}
			._grid{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: repeat(9999,60rpx);
				grid-column-gap: 30rpx;
				grid-row-gap: 30rpx;
				min-height: 500rpx;
				max-height: 600rpx;
				overflow-y: auto;
			}
			._btn{
				width: 180rpx;
				padding: 12rpx 0;
				text-align: center;
				border-radius: 8rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
			._rt{
				color: #FFFFFF;
				background-color: #19BE6B;
				margin-left: 30rpx;
			}
			._lt{
				color: #333;
				background-color: #F0F0F0;
			}
		}
		._li{
			display: flex;
			padding: 26rpx 26rpx 0;
			background-color: #FFFFFF;
			._line{
				border-bottom: 1rpx solid #F8F8F8;
			}
		}
	}
</style>
